<template>
  <div class="app">
    <a-breadcrumb style="margin-bottom: 10px">
      <a-breadcrumb-item>考核管理</a-breadcrumb-item>
      <a-breadcrumb-item>考核申诉</a-breadcrumb-item>
    </a-breadcrumb>
    <a-row>
      <a-col :span="18">
        申诉时间范围：
        <a-range-picker
          style="width: 330px"
          v-model="creationDateRange"
          :placeholder="['开始日期', '结束日期']"
          valueFormat="YYYY-MM-DD HH:mm:ss"
          format="YYYY-MM-DD HH:mm:ss"
          :show-time="{ 
            defaultValue: [
              moment('00:00:00', 'HH:mm:ss'),  // 开始时间默认00:00
              moment('23:59:59', 'HH:mm:ss')   // 结束时间默认23:59
            ]
          }"
          @change="changeDate"
        />
      </a-col>
      <a-col :span="6">
        <!-- <a-button type="primary" @click="detailFn('add')"> 增加 </a-button> -->
        &emsp;&nbsp;
        <a-button type="primary" @click="search()"> 查询 </a-button>
        &emsp;&nbsp;
        <a-button @click="reset">重置</a-button>
      </a-col>
    </a-row>
    <a-spin :spinning="loading">
      <a-row>
        <a-col :span="24">
          <div class="flex-between">
            <a-tabs v-model="tabsValue" @change="changeTab">
              <a-tab-pane
                v-for="item in menuList"
                :key="item.value"
                :tab="item.label"
              >
              </a-tab-pane>
            </a-tabs>
          </div>
          <a-table
            :columns="queryForm.appealStatus == 4 ? columns2 : columns"
            :data-source="tableData"
            :scroll="{ x: 1700 }"
            :pagination="false"
          >
            <span slot="appealType" slot-scope="text, record">
              {{ getName(record.appealType, appealType) }}
            </span>
            <span slot="action" slot-scope="text, record">
              <a
                v-hasPermi="['khss:shensu']"
                class="blue"
                @click="detailFn('add', text, record)"
                v-show="queryForm.appealStatus == 4"
                >申诉</a
              >
              <!-- <a-divider ype="vertical" v-show="queryForm.appealStatus == 1 || queryForm.appealStatus == 2" /> -->
              <!-- <a
                class="red"
                @click="delFn(text, record)"
                v-show="queryForm.appealStatus == 1 || queryForm.appealStatus == 2"
                >删除</a
              >
              <a-divider
                type="vertical"
                v-show=" queryForm.appealStatus == 1 || queryForm.appealStatus == 2"
                v-hasPermi="['khss:shensu']"
              />
              <a
                v-hasPermi="['khss:shensu']"
                class="blue"
                @click="detailFn('edit', text, record)"
                v-show="queryForm.appealStatus == 1 || queryForm.appealStatus == 2 "
                >编辑</a
              > -->

              <a-divider type="vertical" v-show="queryForm.appealStatus == 0" v-hasPermi="['khss:audit']"/>
              <a
                v-hasPermi="['khss:audit']"
                class="red"
                @click="clickCont2(2, text)"
                v-show="queryForm.appealStatus == 0"
                >不通过</a
              >
              <a-divider type="vertical" v-show="queryForm.appealStatus == 0" v-hasPermi="['khss:audit']" />
              <a
                v-hasPermi="['khss:audit']"
                class="blue"
                @click="clickCont(1, text)"
                v-show="queryForm.appealStatus == 0"
                >通过</a
              >
            </span>
          </a-table>
          <div class="page_box">
            <a-pagination
              v-model="queryForm.offset"
              :page-size-options="['20', '30', '40', '50']"
              :total="total"
              show-size-changer
              :page-size="queryForm.current"
              @showSizeChange="onShowSizeChange"
              @change="pageChange"
              :show-total="(total) => `共 ${total} 条`"
            ></a-pagination>
          </div>
        </a-col>
      </a-row>
    </a-spin>

    <a-modal
      :title="dialogTitle == 'edit' ? '编辑' : '增加申诉'"
      :visible="dialogVisible"
      cancel-text="取消"
      ok-text="确认"
      width="50%"
      @cancel="dialogVisible = false"
      @ok="handleSubmit"
    >
      <a-form
        :model="dataDialogFrom"
        name="basic"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
      >
        <!-- <a-form-item label="申诉人" >
          <a-cascader 
            style="width:150px;marigin-left:10px;"
            :options="fzroptions"
            :load-data="loadData"
            placeholder="请选择"
            change-on-select
            @change="selectFzr" />
        </a-form-item> -->
        <a-form-item label="申诉情形">
          <a-select
            v-model:value="dataDialogFrom.appealType"
            v-decorator="[
              'appealType',
              { rules: [{ required: true, message: '请选择申诉情形' }] },
            ]"
            placeholder="请选择申诉情形"
            style="width: 100%"
          >
            <a-select-option
              v-for="(item, index) in appealType"
              :key="index"
              :value="item.dictValue"
            >
              {{ item.dictLabel }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="申述描述">
          <a-textarea
            v-model:value="dataDialogFrom.appealDesc"
            v-decorator="[
              'appealDesc',
              { rules: [{ required: true, message: '请输入考评描述' }] },
            ]"
            :rows="4"
            placeholder="请填写申诉理由"
            style="width: 100%"
          />
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal
      title="是否确认驳回?"
      :visible="dialogVisible2"
      cancel-text="取消"
      ok-text="确认"
      width="50%"
      @cancel="dialogVisible2 = false"
      @ok="handleSubmit2"
    >
      <a-form
        :model="dataDialogFrom2"
        name="basic"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
      >
        <a-form-item label="驳回原因">
          <a-textarea
            v-model:value="dataDialogFrom.checkDesc"
            v-decorator="[
              'checkDesc',
              { rules: [{ required: true, message: '请输入驳回原因' }] },
            ]"
            :rows="4"
            placeholder="请输入驳回原因"
            style="width: 100%"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
import { appealStatusList } from "./common";
import { Modal } from "ant-design-vue";
import moment from 'moment';
const columns = [
  {
    title: "审核ID",
    dataIndex: "appealUserId",
    key: "appealUserId",
     
  },
  {
    title: "申诉部门",
    dataIndex: "deptName",
    key: "deptName",
     
  },
  {
    title: "申诉人",
    dataIndex: "userName",
    key: "userName",
     
  },
  {
    title: "申诉状态",
    dataIndex: "appealStatus",
    key: "appealStatus",
     
    customRender: (text, record, index) => {
      console.log(text);
      return text == 0
        ? "未审核"
        : text == 1
        ? "审核成功"
        : text == 2
        ? "审核失败"
        : "";
    },
  },
  {
    title: "申诉情形",
    dataIndex: "appealType",
    key: "appealType",
     
    scopedSlots: { customRender: "appealType" },
  },
  {
    title: "事件id",
    dataIndex: "dkrId",
    key: "dkrId",
     
  },
  {
    title: "申诉详情",
    dataIndex: "appealDesc",
    key: "appealDesc",
     
  },
  {
    title: "申诉时间",
    dataIndex: "createTime",
    key: "createTime",
     
  },
  {
    title: "操作",
    key: "action",
    scopedSlots: { customRender: "action" },
    fixed: "right",
  },
];
const columns2 = [
  {
    title: "事件ID",
    dataIndex: "eventId",
    key: "eventId",
     
  },
  {
    title: "抽查人员",
    dataIndex: "userName",
    key: "userName",
    
  },
  {
    title: "所属组织",
    dataIndex: "deptName",
    key: "deptName",
     
  },
  {
    title: "职位",
    dataIndex: "postName",
    key: "postName",
     
  },
  // {
  //   title: "工作类型",
  //   dataIndex: "relatedObjectName",
  //   key: "relatedObjectName",
  //   width: 100,
  // },
  {
    title: "问题对象",
    dataIndex: "issueType",
    key: "issueType",
     
  },
  {
    title: "上报时间",
    dataIndex: "reportTime",
    key: "reportTime",
    
  },
  {
    title: "完成时间",
    dataIndex: "overTime",
    key: "overTime",
    
  },
  {
    title: "考评状态",
    dataIndex: "kpStatusName",
    key: "kpStatusName",
    
  },
  {
    title: "考评人",
    dataIndex: "kpUserName",
    key: "kpUserName",
    
  },
  {
    title: "考评星级",
    dataIndex: "kpSocre",
    key: "kpSocre",
    
  },
  {
    title: "考评时间",
    dataIndex: "kpTime",
    key: "kpTime",
    
  },
  {
    title: "操作",
    key: "action",
    scopedSlots: { customRender: "action" },
    fixed: "right",
  },
];
export default {
  data() {
    return {
      total: 0,
      dialogTitle: "",
      dialogVisible: false,
      dialogVisible2: false,
      tableData: [],
      columns,
      columns2,
      loading: false,
      appealStatusList: appealStatusList,
      queryForm: {
        current: 20,
        offset: 1,
        appealStatus: 4,
        startTime: "",
        endTime: "",
      },
      menuList: [
        // {label: '全部', value: null},
        { label: "可申诉", value: 4 },
        // {label: '审核中', value: 'OPERATION_ACCESS'},
        { label: "申诉成功", value: 1 },
        { label: "申诉失败", value: 2 },
        { label: "申诉审核中", value: 0 },
        // {label: '申诉超时', value: 'CONSERVATION_DEVELOPMENT'},
      ],
      appealType: [],
      creationDateRange: [],
      dataDialogFrom: {},
      dataDialogFrom2: {},
      fzroptions: [],
      userInfo: null,
      tabsValue: 4,
    };
  },
  mounted() {
    this.getList(); // 可申诉
    // this.getList2(); // 申诉成功 和 申诉失败
    this.getDict();
    this.getListDept(); //部门
  },
  methods: {
    moment,

    // 分页
    onShowSizeChange(current, pageSize) {
      this.queryForm.offset = current;
      this.queryForm.current = pageSize;
      this.getList();
    },
    pageChange(current) {
      this.queryForm.offset = current;
      this.getList();
    },
    // ----获取部门
    getListDept() {
      var q1 = "government-platform-center/dept?offset=1&current=100";
      this.$axios.get(q1).then((res) => {
        if (res.data.msg == "success") {
          var data = res.data.data;
          this.fzroptions = [];
          for (let i = 0; i < data.length; i++) {
            this.fzroptions.push({
              value: data[i].thisData.deptId,
              label: data[i].thisData.deptName,
              children: [],
            });
            for (let j = 0; j < data[i].childList.length; j++) {
              this.fzroptions[i].children.push({
                value: data[i].childList[j].thisData.deptId,
                label: data[i].childList[j].thisData.deptName,
                isLeaf: false,
              });
            }
          }
        }
      });
    },
    selectFzr(e) {
      console.log(e);
      if (e.length == 3) {
        var item = e[2].split("/**/");
        this.dataDialogFrom.deptId = e[1]; // 部门
        // this.queryForm.postId = item[0];// 岗位
        this.dataDialogFrom.userId = item[1]; //用户ID
        console.log(item);
      }
    },
    //
    loadData(selectedOptions) {
      const targetOption = selectedOptions[selectedOptions.length - 1];
      targetOption.loading = true;
      var q =
        "/government-platform-center/dept/getUserListByDeptId?deptId=" +
        targetOption.value;
      this.$axios
        .get(q)
        .then((res) => {
          if (res.data.msg == "success") {
            targetOption.loading = false;
            targetOption.children = [];
            for (let i = 0; i < res.data.data.length; i++) {
              targetOption.children.push({
                label: res.data.data[i].userName,
                value:
                  res.data.data[i].postId + "/**/" + res.data.data[i].userId,
              });
            }
            this.fzroptions = [...this.fzroptions];
          } else {
            targetOption.loading = false;
            this.$message.error(res.data.msg || "加载数据失败");
          }
        })
        .catch((err) => {
          targetOption.loading = false;
          this.$message.error("加载数据失败：" + (err.message || "未知错误"));
        });
    },
    changeDate(val) {
      this.queryForm.startTime = val[0];
      this.queryForm.endTime = val[1];
    },
    changeTab(e) {
      this.queryForm.appealStatus = e;
      this.tabsValue = e;
      this.queryForm.current = 20;
      this.queryForm.offset = 1;
      console.log("--切换--", this.queryForm.appealStatus);
      this.getList();
    },
    search() {
      this.tableData = [];
      this.queryForm.offset = 1;
      this.getList();
    },
    reset() {
      this.tableData = [];
      this.creationDateRange = [];
      this.queryForm.offset = 1;
      this.queryForm.startTime = "";
      this.queryForm.endTime = "";
      this.getList();
    },
    getList() {
      this.loading = true;
      this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
      const url1 =
        "government-platform-center/kpiRecord/queryByPagePd?flag=4&userId=" +
        this.userInfo.userId +
        "&current=" +
        this.queryForm.current +
        "&offset=" +
        this.queryForm.offset +
        "&startTime=" +
        this.queryForm.startTime +
        "&endTime=" +
        this.queryForm.endTime;
      const url2 =
        "/government-platform-center/kpiAppeal?current=" +
        this.queryForm.current +
        "&offset=" +
        this.queryForm.offset +
        "&startTime=" +
        this.queryForm.startTime +
        "&endTime=" +
        this.queryForm.endTime +
        "&appealStatus=" +
        this.queryForm.appealStatus;
      // const url3 = '/government-platform-center/kpiAppeal/getShenheApp?current='+this.queryForm.current+'&offset='+ this.queryForm.offset + '&startTime='+ this.queryForm.startTime +'&endTime=' + this.queryForm.endTime;
      this.$axios
        .get(this.queryForm.appealStatus == 4 ? url1 : url2, this.queryForm)
        .then((res) => {
          if (res.data.code == 0) {
            if (this.queryForm.appealStatus == 4) {
              // console.log('------',res.data.data.data)
              this.tableData = res.data.data.map((item) => {
                if (item.kpStatus == 0) {
                  item["kpStatusName"] = "待评价";
                } else if (item.kpStatus == 1) {
                  item["kpStatusName"] = "已评价";
                } else {
                  item["kpStatusName"] = "未知";
                }
                return item;
              });
            } else {
              this.tableData = res.data.data;
            }
            this.total = res.data.total;
            this.loading = false;
          }
        });
    },

    //事件考核申诉类型
    async getDict() {
      const url =
        "government-platform-center/dictData/queryByCode?dictType=event_appeal_type";
      const res = await this.$axios.get(url);
      if (res.data.code == 0) {
        this.appealType = res.data.data;
      }
    },
    getName(id, list) {
      let name = "";
      list.forEach((item) => {
        if (id == item.dictValue) {
          name = item.dictLabel;
        }
      });
      // console.log('----',list)

      return name;
    },
    delFn(text, record) {
      const that = this;
      Modal.confirm({
        title: "确认删除",
        content: "您确定要删除这项内容吗？",
        okText: "确认",
        cancelText: "取消",
        onOk() {
          const url = `/government-platform-center/kpiAppeal/deleteById`;
          that.$axios
            .post(
              url,
              { id: text.id },
              { headers: { "Content-Type": "application/x-www-form-urlencoded"}}
            )
            .then((res) => {
              if (res.data.code == 0) {
                that.$message.success("操作成功");
                that.reset();
              }
            });
        },
        onCancel() {
          // 在此处理取消逻辑
          console.log("删除已取消");
        },
      });
    },
    // 申诉审核
    clickCont(index, text) {
      const that = this;
      Modal.confirm({
        title: "温馨提示",
        content: index == 1 ? "确定审核通过吗" : "确定审核不通过吗",
        okText: "确认",
        cancelText: "取消",
        onOk() {
          const url = `/government-platform-center/kpiAppeal/edit`;
          that.$axios
            .post(
              url,
              { dkrId: text.dkrId, appealStatus: index },
              {
                headers: {
                  "Content-Type": "application/x-www-form-urlencoded",
                },
              }
            )
            .then((res) => {
              if (res.data.code == 0) {
                that.$message.success("操作成功");
                that.reset();
              }
            });
        },
        onCancel() {
          // 在此处理取消逻辑
          // console.log('删除已取消')
        },
      });
    },
    detailFn(index, text, record) {
      // console.log(text,'点击点击',record)
      this.dialogTitle = index;
      this.dialogVisible = true;
      this.dataDialog = record;
    },
    handleSubmit() {
      console.log("案件列表=======", this.dataDialog);
      console.log("提交的参数=======", this.dataDialogFrom);
      console.log("用户信息=======userInfo", this.userInfo);

      const url = `/government-platform-center/kpiAppeal`;
      this.$axios
        .post(
          url,
          {
            appealStatus: 0,
            appealDesc: this.dataDialogFrom.appealDesc,
            appealType: this.dataDialogFrom.appealType,
            appealUserId: this.dataDialog.kpUserId, // 考核人
            deptId: this.userInfo.deptId,
            dkrId: this.dataDialog.dkrId,
            userId: this.userInfo.userId,
          },
          {
            headers: { "Content-Type": "application/x-www-form-urlencoded" },
          }
        )
        .then((res) => {
          if (res.data.code == 0) {
            this.$message.success("操作成功");
            this.reset();
            this.dialogVisible = false;
          }
        });
    },
    // 驳回
    clickCont2(text) {
      this.dataDialogFrom2 = text;
      this.dialogVisible2 = true;
    },
    handleSubmit2() {
      let text = this.dataDialogFrom2;
      if (!text.checkDesc) {
        message.error("请输入驳回原因");
      }
      const url = `/government-platform-center/kpiAppeal/edit`;
      this.$axios
        .post(
          url,
          { id: text.id, checkDesc: text.checkDesc, appealStatus: 2 },
          {
            headers: { "Content-Type": "application/x-www-form-urlencoded" },
          }
        )
        .then((res) => {
          if (res.data.code == 0) {
            this.dialogVisible2 = false;
            this.$message.success("操作成功");
            this.reset();
          }
        });
    },
  },
};
</script>
<style scoped>
.ant-row {
  border-radius: 5px;
  margin-bottom: 15px;
  background: #fff;
  padding: 20px;
  color: #000;
}

/deep/ .ant-table-thead > tr > th {
  color: #000;
  font-weight: bold;
}

/deep/ .ant-table-tbody > tr > td {
  color: #000;
}

.ant-col {
  margin: 10px 0;
}

.ant-select {
  width: 60%;
}

.ant-input {
  width: 60%;
}
.table {
  width: 100%;
  overflow-x: auto !important;
}

/* 添加表格原生滚动条样式 */
::v-deep .ant-table-body {
  overflow-x: auto !important;
  /* overflow-y: auto !important; */
  /* max-height: 500px; 设置最大高度，超出时显示垂直滚动条 */
}

/* 确保使用原生滚动条样式 */
::v-deep .ant-table-body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::v-deep .ant-table-body::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 4px;
}

::v-deep .ant-table-body::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

/* 修复固定列的问题 */
::v-deep .ant-table-fixed-right {
  right: 0px; /* 为滚动条留出空间 */
}
</style>
